<template>
	<view>
		<z-paging ref="paging" v-model="goodsList" @query="getGoodsList" :empty-view-fixed="false" :auto="false" :default-page-size="limit">
			<view class="search-box-fat flex-row-between" slot="top">
				<view class="search-box flex-row-center">
					<image :src="$getImgUrl('home/ic_ss.png')" mode="widthFix" class="img-ss"></image>
					<input type="text" placeholder="按照关键词搜索" v-model="searchText" class="img-ipt" readonly @click="onSearch" />
				</view>
			</view>
			<view class="swiper-view">
				<swiper class="swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.img" class="banner-img" mode="aspectFill" @click="onBannerClick(item)" :lazy-load="true"></image>
					</swiper-item>
				</swiper>

				<view class="shop-title-menu flex-row-between">
					<scroll-view scroll-x="true" class="scroll-x-view">
						<view class="shop-title-item" v-for="(item, index) in cateList" :key="index" @click="onCateClick(item)">
							<image :src="item.img" mode="aspectFill"></image>
							<view>{{ item.name }}</view>
						</view>
					</scroll-view>
				</view>

				<image :src="$getImgUrl('home/cwhz.png')" mode="widthFix" class="img-chaowan" @click="$navTo('pages/manghe/manghe')"></image>
			</view>

			<view class="goods-list-view flex-row">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="onDetail(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="goods-name ellipsis">{{ item.name }}</view>
					<view class="goods-sign-view flex-row-center">
						<view class="goods-sign-item">正品保障</view>
						<view class="goods-sign-item sign-chaoshi">超时赔付</view>
					</view>
					<view class="goods-price-view flex-row-between">
						<view class="goods-price flex-center">
							￥
							<text>{{ item.price }}</text>
						</view>
						<view class="goumai">{{ item.buynum }}人已购买</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script src="./shop.js"></script>

<style lang="scss">
@import '@/style/common.scss';
@import './shop.scss';
</style>
